<template>
  <a-layout class="home-container">


    <a-carousel autoplay class="music-carousel">
      <div v-for="(album, index) in albums" :key="index">
        <img 
          :src="album.image" 
          :alt="`Album cover - ${album.title}`"
          class="carousel-image"
        />
        <div class="carousel-caption">
          <h3>{{ album.title }}</h3>
          <p>{{ album.artist }}</p>
        </div>
      </div>
    </a-carousel>

    <a-layout-content class="content-wrapper">
      <div class="album-section">
        <h2 class="section-title">Popular Albums</h2>
        <a-input-search
          v-model:value="searchQuery"
          placeholder="Search albums..."
          style="margin-bottom: 20px;"
          @search="handleSearch"
        />
        <a-row :gutter="[24, 24]">
          <a-col 
            v-for="(album, index) in filteredAlbums"
            :key="index"
            :xs="{ span: 12 }"
            :md="{ span: 6 }"
            :lg="{ span: 4 }"
          >
            <div class="album-card" @click="goToAlbumDetail(index)">
              <div class="album-cover">
                <img 
                  :src="album.image" 
                  :alt="album.title"
                  class="cover-image"
                />
              </div>
              <div class="album-info">
                <h3 class="album-title">{{ album.title }}</h3>
                <p class="album-artist">{{ album.artist }}</p>
                <p v-if="album.title.toLowerCase().includes('single')" class="album-single">Single: {{ album.title }}</p>
              </div>
            </div>
          </a-col>
          <!-- 新增逻辑：当搜索结果仅剩一条记录时 -->
          <div v-if="filteredAlbums.length === 1" class="single-result-highlight">
            <h3>Artist: {{ filteredAlbums[0].artist }}</h3>
            <p>Album/Single: {{ filteredAlbums[0].title }}</p>
          </div>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const topalbums = ref([
  {
    id: 1,
    title: "Summer Vibes",
    artist: "Various Artists",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6979010.jpg?max_age=2592000"
  },
  {
    id: 2,
    title: "Rock Classics",
    artist: "Legendary Bands",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6980715.jpg?max_age=2592000o"
  },
  {
    id: 3,
    title: "Jazz Nights",
    artist: "Smooth Jazz Ensemble",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6981694.jpg?max_age=2592000"
  }
]);

// 新增专辑数据
const albums = ref([
  {
    id: 1,
    title: "Summer Vibes",
    artist: "Various Artists",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6979010.jpg?max_age=2592000"
  },
  {
    id: 2,
    title: "Rock Classics",
    artist: "Legendary Bands",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6980715.jpg?max_age=2592000o"
  },
  {
    id: 3,
    title: "Jazz Nights",
    artist: "Smooth Jazz Ensemble",
    image: "https://y.qq.com/music/common/upload/MUSIC_FOCUS/6981694.jpg?max_age=2592000"
  }
]);

// 新增搜索查询数据
const searchQuery = ref('');

// 计算属性，根据搜索查询过滤专辑列表
const filteredAlbums = computed(() => {
  return albums.value.filter(album => 
    album.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || // 按专辑标题搜索
    album.artist.toLowerCase().includes(searchQuery.value.toLowerCase()) || // 按艺术家搜索
    (album.title.toLowerCase().includes('ep') && searchQuery.value.toLowerCase().includes('ep')) || // 支持EP标题搜索
    (album.title.toLowerCase().includes('single') && searchQuery.value.toLowerCase().includes('single')) // 支持单曲标题搜索
  );
});

// 新增搜索处理方法
const handleSearch = (value: string) => {
  searchQuery.value = value;
};

// 新增跳转到专辑详情页的方法
const goToAlbumDetail = (index: number) => {
  const albumId = albums.value[index].id;
  router.push({ name: 'MusicDetail', params: { id: albumId } });
};
</script>

<style scoped>
.music-carousel {
  width: 100%;
  height: 400px;
  margin-bottom: 40px;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 8px;
}

.carousel-caption h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

/* 调整原有内容容器的定位 */
.content-wrapper {
  position: relative;
  z-index: 1;
  margin-top: -60px; /* 使内容部分与轮播重叠 */
}
.album-section {
  padding: 40px 0;
}

.section-title {
  color: #333;
  font-size: 28px;
  margin-bottom: 30px;
  padding-left: 12px;
  border-left: 4px solid #1890ff;
}

.album-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.album-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.album-cover {
  position: relative;
  padding-top: 100%; /* 保持1:1比例 */
  background: #f0f2f5;
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  bottom: 16px;
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-card:hover .play-button {
  opacity: 1;
}

.album-info {
  padding: 16px;
}

.album-title {
  color: #333;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-artist {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 新增样式：单曲标题 */
.album-single {
  color: #1890ff;
  font-size: 14px;
  margin-top: 4px;
}

/* 新增样式：突出显示单条记录 */
.single-result-highlight {
  margin-top: 20px;
  padding: 16px;
  background-color: #f0faff;
  border-left: 4px solid #1890ff;
  border-radius: 8px;
}
.single-result-highlight h3 {
  color: #1890ff;
  font-size: 18px;
  margin-bottom: 8px;
}
.single-result-highlight p {
  color: #333;
  font-size: 16px;
}
</style>